<script setup lang="ts">
import { ref, watch } from 'vue'
// import { RouterLink, RouterView } from 'vue-router'
const active = ref(0)

// 将pinia引入用于监听后写入本地存储 -lxz
import { storeToRefs } from 'pinia'
import { FilmDataObj } from '@/stores/LXZ.ts'
const FilmDataStore = FilmDataObj()

const { FilmImg, FilmObj, CurrentOrders, OrdersArray } = storeToRefs(FilmDataStore)

watch(FilmImg, (newValue) => {
  console.log("App.vue FilmImg", newValue)
  localStorage.setItem("FilmImg", newValue)
})
watch(FilmObj, (newValue) => {
  console.log("App.vue FilmObj", newValue)
  localStorage.setItem("FilmObj", JSON.stringify(newValue))
})
watch(CurrentOrders, (newValue) => {
  console.log("App.vue CurrentOrders", newValue)
  localStorage.setItem("CurrentOrders", JSON.stringify(newValue))
})
// watch(OrdersArray, (newValue) => {
//   console.log("App.vue OrdersArray", newValue)
//   localStorage.setItem("OrdersArray", JSON.stringify(newValue))
// })




</script>

<template>
  <header>
    <RouterView />
    <nav v-if="$route.meta.showNav">
      <RouterLink active-class="active" exact to="/">
        <div><van-icon name="home-o" size="20"/></div>
        首页
      </RouterLink>
      <RouterLink active-class="active" exact to="/video">
        <div><van-icon name="video-o" size="20"/></div>
        视频
      </RouterLink>
      <RouterLink active-class="active" exact to="/smvideo">
        <div><van-icon name="tv-o" size="20"/></div>
        小视频
      </RouterLink>
      <RouterLink active-class="active" exact to="/mine">
        <div><van-icon name="contact-o" size="20"/></div>
        我的
      </RouterLink>
    </nav>
  </header>
</template>

<style lang="less" scoped>
header {
  width: 100vw;
  color: #000;

  a {
    color: #000;
    text-align: center;
  }
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12rem;
  position: fixed;
  bottom: 0;
  z-index: 11;
  background-color: #fff;
  width: 100vw;
  height: 50rem;
  .active{
    color: #e54847;
  }
}

// vant组件样式
:deep(.van-tabs__line) {
  background: #e54847;
}
</style>
